<template>
    <div class="frame" @click="toggleMenu">
        <div class="loading" v-show="loadingState">加载中...</div>
    </div>
</template>

<style lang="scss" scoped>
.frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-grow: 1;
}

.loading {
    width: 25%;
    line-height: 3rem;
    padding: 0 2rem;
    font-size: 1.2rem;
    font-style: italic;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(137, 137, 141, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
</style>

<script>
import { mapState, mapActions } from 'vuex';

export default {
    data() {
        return {};
    },
    computed: {
        ...mapState({
            loadingState: state => state.Queue.loading
        })
    },
    methods: {
        ...mapActions(['toggleMenu'])
    }
}
</script>
